<template>
  <view class="su-uploader">
    <view class="su-uploader-handler" @click="chooseImage">
      +
    </view>
    <view class="su-uploader-images-item" v-for="(item,index) in imagesList" :key="index">
      <view class="su-uploader-images-delete" @click="deleteItem(item,index)">
        <text class="iconfont icon-chahao f12"></text>
      </view>
      <u--image radius="6" :src="item" width="70" height="70" mode="aspectFill" @click="previewImg(index)"></u--image>
    </view>
  </view>
</template>

<script>
  // 使用：<su-uploader v-model="filesVal"></su-uploader>
   import config from '@/common/config.js'
  import {
    uploadImg
  } from '@/common/api.js'
  export default {
    name: "su-uploader",
    props: {
      value:{
        type:Array,
        default:[]
      }
    },
    data() {
      return {
        imagesList:this.value
      };
    },
    watch:{
      value:{
        deep:true,
        handler(val){
          this.imagesList = val
        }
      }
    },
    methods: {
      chooseImage() {
        const _this = this
        uni.chooseImage({
          count: 1,
          success(res) {
            _this.picUpload(res.tempFilePaths[0]);
          }
        })
      },
      deleteItem(item,index){
        this.imagesList.splice(index,1)
        this.$emit('input',this.imagesList)
        this.$emit('change',this.imagesList)
      },
      previewImg(index){
        uni.previewImage({
          current:index,
          urls:this.imagesList,
        })
      },
      picUpload(imgPath) {
        uni.showLoading({
          title: '正在上传'
        })
        uni.uploadFile({
          url: config.baseUrl + '/api/index/upload',
          filePath: imgPath,
          name: 'files',
          header: {
            Authorization: 'Bearer ' + this.$store.state.token
          },
          success: (res => {
            
            uni.hideLoading()
            let resData = res.data
            if(resData){
              resData = JSON.parse(resData)
            }
            const val = resData.data.link || ''
            this.imagesList.push(val)
            this.$emit('input',this.imagesList)
            this.$emit('change',this.imagesList)
          }),
          fail: () => {
            uni.hideLoading()
            uni.showToast({
              title: '上传失败，请重新拍摄',
              icon: 'none'
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss">
.su-uploader{
  display: flex;
  flex-wrap: wrap;
  &-handler{
    width: 140upx;
    height: 140upx;
    border-radius: 6px;
    background-color: #f7f7f7;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    color: #999;
    margin-right: 20upx;
    line-height: 1;
    &:active{
      opacity: 0.6;
    }
  }
  
  &-images{
    width: 140upx;
    height: 140upx;
    border-radius: 6px;
    position: relative;
    &-delete{
      position: absolute;
      width: 54upx;
      height: 54upx;
      background-color: rgba(0,0,0,0.6);
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      z-index: 3;
      top: 0;
      right: 0;
      border-radius: 0 6px 0 6px;
      &:active{
        opacity: 0.7;
      }
    }
    &-item{
      display: flex;
      position: relative;
      margin-right: 20upx;
    }
  }
}
</style>
